<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Spring model layout</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />

<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<script type="text/javascript" src="../js/util/Anim.js"></script>
<script type="text/javascript" src="../js/util/DD.js"></script>
<script type="text/javascript" src="../js/util/DDResize.js"></script>
<script type="text/javascript" src="../js/Container.js"></script>
<script type="text/javascript" src="../js/Layer.js"></script>
<script type="text/javascript" src="../js/Layout.js"></script>

<link rel="stylesheet" type="text/css" href="../css/WireIt.css" />

<style>

div.WireIt-Terminal {
	background-image: none;
	width: 0px;
	height: 0px;
}

div.WireIt-Container {
	width: 90px
}

</style>

<script>

var layer = null;

window.onload = function() {
	
	
	var nodes = [
					"WireIt", 
					"librairies", "inputEx", "YUI", "excanvas", 
				 	"classes", "Wire", "Terminal", "Container", "Layer", "WiringEditor"
				];
	var wires = [ 
				  [0,1], [1,2], [1,3], [2,3], [1,4],
	 			  [0,5], [5,6], [5,7], [5,8], [5,9], [5,10]
	 			];
	
	layer = new WireIt.Layer({});
	for(var i = 0 ; i < nodes.length ; i++) {
		layer.addContainer({
			terminals: [ { offsetPosition: {top: 5, left: 25}, editable: false }],
			title: nodes[i],
			position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ],
			close: false
		});
	}
	for(var i = 0 ; i < wires.length ; i++) {
		var wc = wires[i];
		layer.addWire({
			src: {moduleId: wc[0], terminalId: 0},
			tgt: {moduleId: wc[1], terminalId: 0},
			drawingMethod: "straight"
		});
	}
	
	layer.startDynamicLayout();
	
	// For example with animation
	/*setInterval(function() {
		var c = layer.containers[0];
		var anim = new WireIt.util.Anim( c.terminals, c.el, {  left: {to: 500 }, top: {to: 200 } }, 1, YAHOO.util.Easing.easeOut);
		anim.animate();
		layer.dynamicLayout.init();
	}, 5000);*/
	
};


</script>

 </head>
 <body>
 </body>
</html>